<template>
	<view class="person-add-container">
		<uni-section title="基本信息" type="line">
			<view class="example">
				<uni-easyinput v-model="recordPerson.name" placeholder="请输入姓名" />
			</view>
		</uni-section>
			<view class="button-group">
				<button type="primary" class="uni-btn bg-blue" @click="submit('valiForm')">提交</button>
			</view>
	</view>
</template>

<script>
	import {
		addPerson
	} from '@/api/record/person.js'
	import {
		getDictDataList
	} from '@/api/system/dict.js'
	export default {
		data() {
			return {
				personRelationshipType: [],
				recordPerson: {
					personType:"",
					name:"",
					phoneNumber:"",
					recordPersonExtensionList:[{
						name:'工作',
						content:''
				}]},
				dictQuery: {
					pageNum: 1,
					pageSize: 100,
					dictType: "person_relationship_type"
				},
				rules:{
					personType: {
					  rules: [{
					    required: true,
					    errorMessage: '请选择人物关系'
					  }]
					},
					name: {
					  rules: [{
					    required: true,
					    errorMessage: '姓名不能为空'
					  }]
					},
					phoneNumber: {
					  rules: [{
					    required: true,
					    errorMessage: '手机号码不能为空'
					  }, {
					    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
					    errorMessage: '请输入正确的手机号码'
					  }]
					}
				}
			}
		},
		onLoad() {
			this.getDict()
		},
		onReady() {
		  this.$refs.form.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					var that = this;
					addPerson(that.recordPerson).then(response => {
						that.$tab.switchTab("sindex").then(()=>{
							uni.navigateTo({
								url: "/pages/package/work/person/index"
							});
						});
					});
				});
			},
			change(e) {
				console.log("e:", e);
			},
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			getDict() {
				var that = this;
				getDictDataList(that.dictQuery).then(response => {
					var temp = response.rows;
					console.log(temp)
					console.log(temp.length)
					for (var i = 0; i < temp.length; i++) {
						console.log(temp[i].dictValue)
						var item = {
							value: temp[i].dictValue,
							text: temp[i].dictLabel
						};
						that.personRelationshipType.push(item)
					}
					console.log("getDictDataList")
				});
			},
			addExtension(){
				this.recordPerson.recordPersonExtensionList.push({
					name:'',
					content:''
				});
			},
			deleteExtension(index){
				console.log(index);
				this.recordPerson.recordPersonExtensionList.splice(index,1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 15px;
		background-color: #fff;
		padding-bottom: 30px;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
	    position: fixed;
		justify-content: space-around;
	    bottom: 0;
		.uni-btn {
			width: 750rpx;
			border-radius: 0;
		}
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 20px;
	}
	.delete-btn{
		height: 37px;
		align-self: center;
		font-size: 13px;
	}
	.demo-uni-row {
		margin-bottom: 20px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}
	
	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 20px;
	}
	/* #endif */
	
	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}
	
	.dark_deep {
		background-color: #99a9bf;
	}
	
	.dark {
		background-color: #d3dce6;
	}
	
	.light {
		background-color: #e5e9f2;
	}
</style>
